<template>
<div>
    <div class='kong' v-if='mailList.length=="0"'>
        <div>
            <img src="~@/assets/images/myInfo/kong.png" alt="">
            <p>页面暂时没有消息哦~</p>
        </div>  
    </div>
    <div class='notice' v-else>
        <div class="box" @click='mailreadEd(item,index)' v-for="(item,index) in mailList" :key="index">
            <div class="box-top" :style="{'color':item.textColor,'background':item.headColor}">
                <div class="box-top-title">
                    <div class="box-top-title-red" :class="item.status==0?'red':''"></div>
                    <div class="box-top-title-img">
                        <img :src="item.headImage">
                    </div>
                    <div class="box-top-title-text">{{item.title}}</div>
                </div>
                <div class="box-top-time">{{item.crt_date}}</div>
            </div>
            <div class="center">
                <div v-if='item.remark' class='center-item' :style="{'color':item.textColor}">{{item.remark}}</div>
                <div class="center-item" v-for="(value,name,index) in item.message" :key ='index'>
                    <div class="class-item-left">{{transformEDS(name)}}</div>
                    <div class="class-item-right">{{value}}</div>
                </div>
                <div v-if='item.url' @click='detailBtn(item.url)' class="center-bottom">
                    <van-cell title="查看详情" is-link />
                </div>
            </div>
        </div>
        
    </div>   
</div>
</template>
<script lang="ts">
import 'vant/lib/cell/style';
// import 'vant/lib/cellgroup/style';
// import 'vant/lib/toast/style';
import 'vant/lib/dialog/style';
import { Cell, CellGroup,Dialog } from 'vant';
import { Component, Vue, Prop } from 'vue-property-decorator';
import { cloudApi } from '@/api/indexApi';
@Component({
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Dialog.name]: Dialog,
  },
})
export default class mailInfo extends Vue {
    type  =''
    time  = ''
    itemList:any=[]
    mailList= [
        //  {
        //    channel: "0",//推送渠道 0 收件箱  1 公众号  2 小程序
        //     crt_date: "2021-03-15 14:48:45",//创建时间
        //     first: "",
        //     headColor: "#F3FFF3",//背景颜色
        //     textColor:'#378F69',//字体颜色
        //     headImage: require("@/assets/images/myInfo/insurance.png"),
        //     remark: "", 
        //     title: "投保成功通知",
        //     url: "",
        //     id: 16,//消息id
        //     mdf_date: "2021-03-15 14:48:45.0",//修改时间
        //     message: '{"productName":"学乐平","amoune":"188.96","area":"北京天安门","status":"续保"}',
        //     openId: "123",//用户id
        //     status: "0",//是否已读 0未读 1已读
        //     unRead:'1',//未读消息条数
        // } 
    ]
  created() {
    document.title = '消息中心';
    cloudApi.notificationTypeUrl({type :1}).then(res => {//码值转换
        if(res.data.flag=='1'){
           this.itemList = res.data.result  
        }else{
            Dialog.alert({ title: '温馨提示', message: res.data.result })
        }       
    }) 
    //   this.mailList.forEach((e:any,index:any) => {
    //             e.message=JSON.parse(e.message)
    //         });
    this.getMailList()   
  }
  mounted(){
  if (window.history && window.history.pushState) { // 向历史记录中插入了当前页
      history.pushState(null, null, document.URL);
      window.addEventListener('popstate', this.goBack, false);
    }
  }
  destroyed () {
    window.removeEventListener('popstate', this.goBack, false);
  }
  goBack(){ 
    if((window as any).wx.miniProgram){
        (window as any).wx.miniProgram.navigateBack({
        delta: history.length
        })
    }
  }
  detailBtn(url:any){
    window.location.href=url
  }
  transformEDS(name:any){//码值转换
    let nameVal=''
    this.itemList.forEach((e:any,index:any) => {
    if(name==e.codeName){
        nameVal= e.codeDesc     
    } 
    });  
    return nameVal 
  }
  getMailList(){//获取邮箱列表newtouchYesh
  let wxOpenId =this.$route.query.wxOpenId
    cloudApi.notificationURL({openId:wxOpenId}).then(res => {
        if(res.data.flag=='1'){
            if(res.data.result.messageCenter){
                this.mailList = res.data.result.messageCenter
                this.mailList.forEach((e:any,index:any) => {
                e.message=JSON.parse(e.message)
               });
            }
            console.log(this.mailList.length)
        }else{
            Dialog.alert({ title: '温馨提示', message: res.data.result })
        }      
    })
  }
  mailreadEd(itemData:any,i:any){
    let _this =this
    if(itemData.status=='1'){return}
    cloudApi.setMessageStatusByOpenId({openId:itemData.openId,id : itemData.id}).then(res => {
        if(res.data.flag=='1'){
            _this.mailList[i].status='1'
        }else{
            Dialog.alert({ title: '温馨提示', message: res.data.result })
        }      
    })
  }
}
</script>
<style lang="less" scoped>  
    .kong{
        position:absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background:#fff;
        color:#717171;
        font-size:14px;
        text-align: center;
        div{
           position:absolute;
           width:190px;
           height:128px;
           left: 25%;
           top:30%;
           img{
                width:190px;
                height:128px;
           }
        }   
    }
    .notice{
        font-family: PingFang SC;
        margin:14px 10px;
    }
    .box{
        display: flex;
        align-items: left;
        flex-flow: column;
        width:100%;
        margin-bottom:10px;
        .box-topBlue{
            background: #F2FAFF !important;
        }
        .box-top{
            padding: 0 10px 0 5px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 6px 6px 0px 0px;
            .box-top-title{
                line-height: 50px;
                display: flex;
                align-items: center;
                .box-top-title-red{
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                   
                }
                .red{
                    background: red;
                }
                .box-top-title-img{
                    display: flex;
                    margin:0 6.5px;
                    img{
                        width: 17.5px;
                        height:20px;
                    }
                }
                .box-top-title-text{
                    font-size: 15px;
                }
            }
            .box-top-time{
                font-size:13px;
                color: #636363;
            }
        }
        .center{
            background: #fff;
            padding:20px 20px 0;
            .center-item{
                display: flex;
                font-size:14px;
                padding-bottom: 15px;
                .class-item-left{ 
                    flex:1;
                    color: #999999;
                }
                .class-item-right{
                    flex:3;
                    color: #333333;
                }
            }
            .center-bottom{
                display: flex;
                justify-content: space-between;
                border-top: 1px solid #EEEEEE;
                height: 43px;
                align-items: center;
                .van-cell{
                    padding: 0;
                    .van-cell__title{
                        font-size: 14px;
                        color: #666666;
                    }
                }
            }
        }
    }
</style>